<template>
  <div class="system">
    <el-main>
      <el-tabs style="margin:20px 0;" v-model="activeName">
        <el-tab-pane label="镇街管理" name="fourth">
          <el-table :data="townData" border style="width: 100%">
            <el-table-column prop="grade" label="级别" align="center">
            </el-table-column>
            <el-table-column prop="role_name" align="center" label="账号名称">
            </el-table-column>
            <el-table-column prop="login_name" align="center" label="登录名">
            </el-table-column>
            <el-table-column prop="position" align="center" label="联系人">
            </el-table-column>3
            <el-table-column prop="mobile" align="center" label="联系方式">
            </el-table-column>
            <el-table-column prop="address" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" v-if="rid == 0" class="editText" @click="exitTown(scope.row.id)">修改</el-button>
                <el-button type="text" v-if="rid == 0" class="ck" @click="resetTown(scope.row.id)">重置密码</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      readonly: true,
      activeName: 'fourth',
      townData:[]
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'roles',
      'type',
      'is_admin_view',
      'rid'
    ]),
  },
  async mounted() {
    this.townData.push({
      grade: "一级",
      role_name: "顺企中心",
      login_name: "shunqi",
      position: "曾婷",
      mobile: "13790092058",
      address: ""
    })
  },
  methods: {
    exitTown(id){
      // console.log(id,'修改')
      try {
        // this.exitUserId = id;
        // this.CreatCancle = true;
        // this.form = await backUserInfo({ id: id })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    resetTown(id){
      this.$confirm('确定重置密码吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          this.$message({
            type: 'success',
            message: '重置成功!'
          });
        } catch (e) {
          this.$message.error(e.message)
        }
      })
    }

  }
}
</script>

<style scoped lang="less">
.system {
  margin-top:30px;
}
.el-main {
  margin: 0 15px;
}
.pagination {
  margin: 15px 0;
}

.el-pagination {
  text-align: right;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
